<template>
  <div class="position-full flex-justify-between select-cont" :style="{...styles.backgroundStyles}">
    <span class="placeholder" :style="{...styles.textStyles}">{{widget.UI.data.placeholder}}</span>
    <i class="el-icon-arrow-down placeholder" :style="{...styles.activeStyles}"></i>
  </div>
</template>
<script>
  import {mapState} from 'vuex';
  import {WidgetSelectInput} from "@/modules/IDE/widget/atom/widgetSelectInput";
  import {formatColor} from "@/utils";

  export default {
    name: 'SelectInputWidget',
    props: {
      widget: {
        type: WidgetSelectInput,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {};
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      state() {
        if (!this.widget || !this.widget.UI.state) return;
        return this.widget.getCurrentState();
      },
      styles() {
        const {
          backgroundColor = '',
          textColor = '',
          activeColor = '',
        } = this.widget.UI.data
        const backgroundStyles = {};
        const activeStyles = {};
        const textStyles = {};
        backgroundColor && (backgroundStyles.backgroundColor = formatColor(backgroundColor, this.activeTheme));
        activeColor && (activeStyles.color = formatColor(activeColor, this.activeTheme));
        textColor && (textStyles.color = formatColor(textColor, this.activeTheme));
        return {
          backgroundStyles: backgroundStyles,
          activeStyles: activeStyles,
          textStyles: textStyles,
        };
      },
    },
  };
</script>

<style scoped lang="less">
  .select-cont {
    padding: 0 10px;
    box-sizing: border-box;

    .placeholder {
      font-size: 14px;
      //color: #c0c4cc;
    }
  }
</style>
